<template>
    <div class="views-yingyuanxinxi-web-detail">
        <div>
            <e-container>
                <div class="row4 hjlgf">
                    <div class="row clearfix">
                        <div class="row1">
                            <e-image-toggle :images="map.yingyuantupian"></e-image-toggle>
                        </div>
                        <div class="row2">
                            <section class="product-details add-cart">
                                <header class="entry-header">
                                    <h1 class="entry-title uppercase" v-text="map.yingyuanmingcheng"></h1>
                                </header>
                                <article class="entry-content">
                                    <figure>
                                        <ul class="entry-meta unstyled">
                                            <li>
                                                <span class="key">负责人:</span>
                                                <span class="value">{{ map.fuzeren }}</span>
                                            </li>
                                        </ul>
                                        <ul class="entry-meta unstyled">
                                            <li>
                                                <span class="key">联系电话:</span>
                                                <span class="value">{{ map.lianxidianhua }}</span>
                                            </li>
                                        </ul>
                                        <ul class="entry-meta unstyled">
                                            <li>
                                                <span class="key">影院地址:</span>
                                                <span class="value">{{ map.yingyuandizhi }}</span>
                                            </li>
                                        </ul>
                                        <div class="rate-bar inline-middle">
                                            <div
                                                class="rateit"
                                                data-rateit-backingfld="#backing0"
                                                data-rateit-starwidth="12"
                                                data-rateit-starheight="12"
                                                data-rateit-resetable="false"
                                                data-rateit-ispreset="true"
                                                data-rateit-min="0"
                                                data-rateit-max="5"
                                            ></div>
                                        </div>
                                    </figure>
                                </article>
                            </section>
                        </div>
                    </div>
                </div>

                <div style="margin: 15px 0 15px 0; background-color: #FFFFFF">
                    <e-container>
                        <el-tabs type="border-card">
                            <el-tab-pane label="影院描述">
                                <div style="text-indent: 4em">
                                    <div v-html="map.yingyuanmiaoshu"></div>
                                </div>
                            </el-tab-pane>
                            <!--<el-tab-pane label="影院排片">
                                <div class="list-table">
                                    <table width="100%" border="1" class="table table-list table-bordered table-hover">
                                        <thead>
                                            <tr align="center">
                                                <th width="60" align="center">序号</th>
                                                <th>电影编号</th>
                                                <th>电影名称</th>
                                                <th>分类</th>
                                                <th>电影类型</th>
                                                <th>影票价格</th>
                                                <th>播放影院</th>
                                                <th>播放厅</th>
                                                <th>开场时间</th>
                                                <th>散场时间</th>
                                                <th>票数</th>
                                                <th>操作人</th>

                                                <th width="80" align="center">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(r,i) in paipianlist">
                                                <td width="30" align="center">{{ i+1 }}</td>
                                                <td>{{ r.dianyingbianhao }}</td>
                                                <td>{{ r.dianyingmingcheng }}</td>
                                                <td><e-select-view module="dianyingfenlei" :value="r.fenlei" select="id" show="fenleimingcheng"></e-select-view></td>
                                                <td>{{ r.dianyingleixing }}</td>
                                                <td>{{ r.yingpiaojiage }}</td>
                                                <td>{{ r.bofangyingyuan }}</td>
                                                <td><e-select-view module="bofangting" :value="r.bofangting" select="id" show="bofangtingmingcheng"></e-select-view></td>
                                                <td>{{ r.kaichangshijian }}</td>
                                                <td>{{ r.sanchangshijian }}</td>
                                                <td>{{ r.piaoshu }}</td>
                                                <td>{{ r.paipianren }}</td>
                                                <td align="center">
                                                    <el-button @click="$goto('/paipian/detail?id='+r.id)"> 详细 </el-button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-tab-pane>-->
                        </el-tabs>
                    </e-container>
                </div>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";
    import EImageToggle from "@/components/sxshop/image-toggle.vue";

    import { ref, reactive, watch } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { extend } from "@/utils/extend";
    import { useYingyuanxinxiFindById, canYingyuanxinxiFindById } from "@/module";

    const route = useRoute();

    // 获取详情页面的一行数据,当url参数id变更时，自动
    const map = useYingyuanxinxiFindById(route.query.id);
    // 当url参数id变更时，自动更新map中的数据
    watch(
        () => route.query.id,
        (id) => {
            canYingyuanxinxiFindById(id).then((res) => {
                extend(map, res);
            });
        }
    );
    // end 获取详情页面的一行数据

    // 定义响应式变量paipianlist,并获取数据排片模块的数据
    const paipianlist = DB.name("paipian").limit("10000").order("id desc").selectRef();
</script>

<style scoped lang="scss">
    .views-yingyuanxinxi-web-detail {
    }
</style>
